/**
 * 首页组件
 * 作为应用程序的主入口页面，展示医疗服务的核心功能和推荐内容
 * 包含搜索栏、快速服务入口、专科门诊推荐和医生列表等功能模块
 */

import { useState, useEffect } from 'react';
import { Search } from 'react-vant';
import { ChatO, RefundO, Passed, MedalO, PhoneO, Description, StarO, GuideO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { FixedSizeList as List } from 'react-window';
import Footer from '../../components/Footer/Index';
import './Index.css';
import { NavLink, Outlet } from 'react-router-dom';

/**
 * 医生信息接口
 * 定义了医生卡片展示所需的数据结构
 */
interface Doctor {
  id: number;          // 医生ID
  name: string;        // 医生姓名
  title: string;       // 医生职称
  hospital: string;    // 所属医院
  department: string;  // 所属科室
  avatar: string;      // 医生头像URL
}

/**
 * 首页组件
 * 展示医疗服务的核心功能和推荐内容
 */
const Index = () => {
  const [value, setValue] = useState('');  // 搜索框输入值
  const navigate = useNavigate();          // 路由导航钩子
  const [doctors, setDoctors] = useState<Doctor[]>([]);  // 医生列表数据
  const [loading, setLoading] = useState(false);         // 加载状态标志

  /**
   * 生成模拟医生数据
   * 在组件挂载时执行，模拟从后端获取医生数据
   * 实际项目中应替换为真实的API调用
   */
  useEffect(() => {
    const generateDoctors = () => {
      const mockDoctors: Doctor[] = [];
      for (let i = 0; i < 1000; i++) {
        mockDoctors.push({
          id: i,
          name: `医生${i + 1}`,
          title: ['主任医师', '副主任医师', '主治医师'][i % 3],
          hospital: `${['北京协和', '华西', '同济'][i % 3]}医院`,
          department: ['内科', '外科', '儿科', '妇科'][i % 4],
          avatar: `https://via.placeholder.com/50?text=${i + 1}`
        });
      }
      return mockDoctors;
    };

    setLoading(true);
    // 模拟异步加载
    setTimeout(() => {
      setDoctors(generateDoctors());
      setLoading(false);
    }, 500);
  }, []);

  /**
   * 快速服务入口配置
   * 定义了首页展示的快速服务入口，包括图标和文本
   */
  const quickServices = [
    { icon: <MedalO />, text: '找医院' },
    { icon: <PhoneO />, text: '电话问诊' },
    { icon: <Description />, text: '图文急诊' },
    { icon: <StarO />, text: '权威专家' },
    { icon: <GuideO />, text: '自诊自查' },
    { icon: <ChatO />, text: '视频问诊' },
    { icon: <MedalO />, text: '儿科门诊' },
    { icon: <Description />, text: '问诊开药' },
    { icon: <StarO />, text: '特惠义诊' },
    { icon: <MedalO />, text: '疫苗预约' },
  ];

  /**
   * 医生卡片渲染组件
   * 用于在虚拟列表中渲染每个医生卡片
   * @param index - 医生在列表中的索引
   * @param style - 虚拟列表项样式
   * @returns 渲染的医生卡片组件
   */
  const DoctorRow = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const doctor = doctors[index];
    return (
      <div className="doctor-card" style={style}>
        <img src={doctor.avatar} alt={doctor.name} className="doctor-avatar" />
        <div className="doctor-info">
          <h4>{doctor.name}</h4>
          <p>{doctor.title}</p>
          <p>{doctor.hospital}</p>
          <p>{doctor.department}</p>
        </div>
      </div>
    );
  };

  return (
    <div className='box'>
      {/* 顶部搜索栏 */}
      <div className="top">
        <Search
          showAction
          actionText={<div onClick={() => navigate('/search')}>搜索</div>}
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
        />
        <RefundO />
        <ChatO />
      </div>

      {/* 主要内容区域 */}
      <div className="main">
        {/* 子路由内容渲染区域 */}
        <Outlet />

        {/* 平台认证信息 */}
        <div className="maintop">
          <span><Passed />国家卫健委认证医疗机构</span><span>1.82亿用户信赖</span>
        </div>

        {/* 快速问诊和找医生入口 */}
        <div className="maintop1">
          <div className="mainleft">
            <span>快速问诊</span>
            <p>7x24小时 智能匹配医生</p>
          </div>
          <div className="mainright">
            <div className="mianright-top" onClick={() => navigate('/doctor')} >
              <span>找医生</span>
              <p>全国66万医生任你选</p>
            </div>
            <div className="mianright-bottom" onClick={() => navigate('/inquiry/history')}>
              <span>问诊历史记录</span>
              <p>查看问诊记录，了解病情</p>
            </div>
          </div>
        </div>

        {/* 名医直播区域 */}
        <div className="live-section">
          <h3>春雨名医直播间</h3>
          <p>精选名医 在线直播</p>
        </div>

        {/* 快速服务入口网格 */}
        <div className="quick-services">
          {quickServices.map((service, index) => (
            <div key={index} className="service-item">
              {service.icon}
              <span>{service.text}</span>
            </div>
          ))}
        </div>

        {/* 专科门诊推荐区域 */}
        <div className="department-section">
          <h3>专科门诊</h3>
          <div className="department-cards">
            <div className="department-card male">
              <h4>专业男科</h4>
              <p>18元咨询 阳痿早泄</p>
              <button>立即咨询</button>
            </div>
            <div className="department-card tcm">
              <h4>春雨中医馆</h4>
              <p>名医坐诊 在线问诊</p>
              <button>立即咨询</button>
            </div>
          </div>
        </div>

        {/* 精选医生列表区域 */}
        <div className="doctors-section">
          <h3>精选医生</h3>
          {loading ? (
            <div className="loading">加载中...</div>
          ) : (
            <div className="doctors-list">
              {/* 使用虚拟列表优化长列表渲染性能 */}
              <List
                height={400}
                itemCount={doctors.length}
                itemSize={100}
                width="100%"
              >
                {DoctorRow}
              </List>
            </div>
          )}
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className="footer">
        <Footer />
      </div>
    </div>
  );
};

export default Index;